<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的租借记录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/homepage.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .searchbar{
        text-align: center;
    }
    .table-item{
        text-align: center;
    }
</style>
<body>
<div th:include="headbar::customer_headbar" style="margin-bottom:70px"></div>
<!--<div style="padding: 20px 550px 10px">-->
<!--<div class="searchbar" >-->
<!--    &lt;!&ndash;   搜索框&ndash;&gt;-->
<!--    <form  class="form-inline"  id="searchForm">-->
<!--        <div class="input-group">-->
<!--            <input type="text" placeholder="记录搜索" class="form-control" name="searchWord" id="searchWord">-->
<!--            <span class="input-group-btn">-->
<!--                <input type="submit" value="搜索" class="btn btn-default" >-->
<!--            </span>-->
<!--        </div>-->
<!--    </form>-->
<!--</div>-->

<div class="panel panel-default" style="width: 90%;margin-left: 5%">
    <div class="panel-heading">
        <h3 class="panel-title" style="text-align:center">归还</h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover" style="text-align:center">
            <thead>
            <tr>
                <th class="table-item">订单号</th>
                <th class="table-item">借出时间</th>
                <th class="table-item">归还时间</th>
                <th class="table-item">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="record: ${list}"  >
                <td th:text="${record.getBorrowRecordId()}" class="table-item"></td>
                <td th:text="${record.getBorrowDate()}" class="table-item"></td>
                <td th:text="${record.getReturnDate()}" class="table-item"></td>
                <td class="table-item" >
                    <!-- th:attr="carId=${car.carId}" //未还：0，已还：1-->
                    <button class="btn btn-info" id="return-button" onclick="returnRequest(this)"
                            th:attr="recordState=${record.getState()}"
                            th:text="${record.getState() == 0 ?'归还'  :'已归还'}"
                            th:disabled="${record.getState() ==1}">
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>

    //归还提交请求
    function returnRequest(button){
        var selectedRow = $(button).closest('tr');

        var recordId = selectedRow.find('td:eq(0)').text();


        $.ajax({
            url: '/cars/return',
            method: 'POST',
            data: {recordId:recordId},
            success: function(response) {
                alert('成功归还！');
                window.location.href = response; // 重定向到指定页面 customer_return;
            },
            error: function(xhr, status, error) {
                alert("归还失败！");

            }
        });
    }

</script>
</body>
</html>